import React, { useEffect, useState } from "react";
import { useHistory, useParams } from "react-router-dom";
import ajax from "./axios";
import { Toast } from "antd-mobile";
const top1 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top1.png";
const top2 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top2.png";
const top3 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top3.png";
const top4 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top4.png";
const top5 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top5.png";
const top6 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top6.png";
const list_top =
  "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/list_top.png";
const my_shangchuan =
  "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/my_shangchuan.png";
const X = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/x.png";
const load_x = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/load_x.png";
const img_icon =
  "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/img_icon.png";
const zan = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/zan.png";
const zan_hui = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/zan_hui.png";
const min_my_top = require("./img/min_my_top.png").default;
function Home() {
  const history = useHistory();
  const [list, setList] = useState([]);
  const [item, setItem] = useState("");
  const [detail, setDetail] = useState({});
  const { type } = useParams();
  const UserImg = (str) => {
    if (!str) return " ";
    const a =
      Array.from(str)
        .map((c, idx) => c.charCodeAt(0) * ((idx % 6) + 1))
        .reduce((n1, n2) => n1 + n2) % 6;
    return a; //颜色
  };
  const imgS = {
    0: top1,
    1: top2,
    2: top3,
    3: top4,
    4: top5,
    5: top6,
  };
  function onInfo() {
    // minitiaozhan/siqingzhufu
    ajax("get", "/file", { activityType: type || "minitiaozhan" }).then(
      (res) => {
        if (res.code == 0) {
          if (res.data) {
            setList(res.data);
            setDetail(res.detail || {});
          }
        }
      }
    );
  }
  const onZan = (item, index) => {
    ajax("post", "/file/like", { id: item.id }).then((res) => {
      if (res.code == 0 && res.success) {
        const listNew = JSON.parse(JSON.stringify(list));
        listNew[index].isLikes = true;
        listNew[index].likes = listNew[index].likes + 1;
        setList(listNew);
      } else {
        Toast.show({
          position: "top",
          content: res.data,
        });
      }
    });
  };
  useEffect(() => {
    onInfo();
  }, []);
  return (
    <div className="home">
      <div className="back">
        <img
          onClick={() => {
            history.go(-1);
          }}
          src={X}
        />
      </div>
      <div className="ban1">
        <img src={type == "minitiaozhan" ? min_my_top : list_top} />
      </div>
      <div className="home_main" style={{ paddingTop: "20px" }}>
        <div className="home_con" style={{ marginTop: 0 }}>
          <div className="list_con_all">
            {list?.map((item, index) => {
              return (
                <div key={index}>
                  <div
                    onClick={() => {
                      setItem(item);
                    }}
                    style={{ width: "100%", height: "75%" }}
                  >
                    <div className="con_title">{item.description}</div>
                    <img
                      className="img"
                      src={
                        item.fileName +
                        "?x-oss-process=image/resize,m_pad,h_100"
                      }
                    />
                  </div>

                  <div className="userName_box">
                    <div>
                      <img
                        className="top1"
                        src={imgS[UserImg(item.userName)]}
                      />
                      {item.ad}
                    </div>
                    {type == "minitiaozhan" ? (
                      <div> NO: {index + 1} </div>
                    ) : (
                      <div>
                        {!item.isLikes ? (
                          <img
                            src={zan_hui}
                            onClick={() => {
                              onZan(item, index);
                            }}
                          />
                        ) : (
                          <img src={zan} />
                        )}

                        {item.likes}
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      {!detail.id && (
        <img
          className="my_shangchuan"
          onClick={() => {
            history.push("/load/" + type);
          }}
          src={my_shangchuan}
        />
      )}
      {item && (
        <div className="list_img_fix">
          <div className="list_img_box">
            <div className="list_box">
              <div className="mina_img">
                <img src={item.fileName} />
              </div>
              <div className="name_top">
                <img src={imgS[UserImg(item.userName)]} />
                {item.ad}
              </div>
              <img className="img_icon" src={img_icon} />
            </div>
            <div className="list_titlt">{item.description}</div>
            <div className="list_load_x">
              <img
                src={load_x}
                onClick={() => {
                  setItem("");
                }}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default Home;
